<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>应急信息发布区域管理地图</title>
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #result {width:100%;font-size:12px;}

        ul,li{list-style: none;margin:0;padding:0;float:left;}
        #container{height:100%;width:100%;}
        #r-result{width:100%;}
        .tabarss{
            width:400px;
            height:800px;
            position:fixed;
            top:60px;
            left:20px;
            z-index: 99;
            border-radius:24px;
            background-color: #fff;
        }
        .concentration{
            width: 155px;
            height: 51px;
            background: #404244;
            border-radius: 0 0 33px 0;
            opacity: 0.8;
            position:fixed;
            left:0;
            top:0;
            text-align: center;
            line-height: 51px;
            font-size: 30px;
            font-family: PangMenZhengDao;
            color: #FFFFFF;
            letter-spacing: 2px;
        }
        .cha{
            position:fixed;
            top:20px;
            right:20px;
            width: 36px;
            height: 36px;
            background: #FF4747;
            border-radius:50%;
            text-align: center;
            line-height: 36px;
        }
        .layui-icon-close{
            font-size:25px!important;
            color:#fff;
        }
        .top{
            height:64px;
            line-height: 64px;
            color:#414141;
            font-size:18px;
            background-color: #F6F6F6;
            display:flex;
            width:100%;
            border-radius:24px 24px 0 0;
        }
        .tabChoose{
            width:115px;
            text-align: center;
            cursor: pointer;
        }
        .tabChoosed{
            font-weight: 600;
            background-color: #fff;
        }
        .layui-form>ul li span {
            display: inline-block;
            width: 300px;
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
            border-bottom: 1px solid #ECECEC;
            color: #454545;
        }
        .layui-form>ul li{
            margin-left:20px;
        }
        .layui-form .topSwitch span{
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #414141;
            margin-left:20px;
        }
        .topSwitch{
            height:48px;
            display:flex;
            align-items: center;
            justify-content: space-between;
        }
        .topSwitch .layui-form-switch{
            margin-top:0;
            margin-right:20px;
        }
        .personTab{
            display:flex;
            border-bottom:1px solid #E7E7E7;
        }
        .personType{
            width:93px;
            height:36px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
        }
        .personChoosed{
            color:#007AFF;
            border-bottom:2px solid #007AFF;
        }
        .personChoose .layui-input {
            width: 350px;
            height: 30px;
            background: #F1F1F1;
            border-radius: 15px;
            margin-left: 20px;
            padding-left: 28px;
        }
        .layui-form .layui-inputzb{
            width:100px;
        }
        .zbPerson{
            display:flex;
            align-items: center;
        }
        .referencePoint{
            margin-left:20px;
            color:#007AFF;
        }
        .pointSearch{
            width: 54px;
            height: 30px;
            background: #007AFF;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
            color:#fff;
            margin-left:20px;
        }
        .ywform{
            padding:15px 0;
            border-bottom:1px dotted #E7E7E7;
        }
        .caller-icons{
            position: absolute;
            top:8px;
            left:26px;
            color:#828282;
        }
        .layui-search{
            position:absolute;
            font-size: 12px;
            font-weight: 400;
            color: #1681FB;
            top:6px;
            right:10px;
            cursor: pointer;
        }
        .line{
            width:100%;
            height:1px;
            background-color: #E7E7E7;
            margin-top:15px;
        }
        .layui-forma {
            margin-top: 20px;
        }
        .distancesz{
            margin-left:10px;
        }
    </style>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/mapstyle.css">
    <link rel="stylesheet" type="text/css" href="../../css/xcConfirm.css"/>
    <script src="../../js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>-->

    <link href="../../layui256/css/layui.css" rel="stylesheet" type="text/css">
    <script src="../../layui256/layui.js"></script>
    <script src="../../layui/layui-xtree.js"></script>
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <script src="../../js/jquery-1.8.3.js"></script>
    <script src="../../js/util.js"></script>



    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSGoPNzNrehEaGBst1TZzklH"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <!--测算工具类-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nSGoPNzNrehEaGBst1TZzklH"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
</head>
<body>
<div id="allmap"></div>
<div id="loadingDiv" class="load-white-bg hide">
    <span class="qloading">正在加载...</span>
</div>
<div class="concentration">专注模式</div>
<div class="cha">
    <span class="layui-icon layui-icon-close"></span>
</div>
<div class="tabarss">
    <div class="top">
        <div class="tabChoose">已关联</div>
        <div class="tabChoose">可关联</div>
    </div>
    <div class="layui-form personChoose" pane="">
        <form class="layui-form topSwitch">
            <span style="font-size:14px;">显示轨迹</span>
            <input style="zoom: 0.7;margin-right:20px;" class="inputa" type="checkbox" name="switch" lay-skin="switch" lay-filter="changeMgrState">
        </form>
        <ul id="ulPersonListc"></ul>
    </div>
    <div class="layui-form personChoose" pane="">
        <div class="personTab">
            <div class="personType">指定人员</div>
            <div class="personType">周边人员</div>
        </div>
        <div class="personContent">
            <!--表单--搜索框-->
            <form class="layui-form layui-forma" lay-filter="searchInfo">
                <div id="searchPerson" class="top_search">
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <i class="layui-icon  caller-icons">&#xe615;</i>
                            <input class="layui-input layui-inputa" type="text" name="search_Person" id="search_Person" placeholder="请输入项目名称搜索"
                                   autocomplete="off">
                            <span class="layui-search" lay-submit="" lay-filter="searchPerson">搜索</span>
                        </div>
                    </div>
                </div>
                <div class="line"></div>
            </form>
            <div class="layui-form" pane="">
                <ul id="ulPersonLista"></ul>
            </div>
        </div>
        <div class="personContent">
            <!--表单--搜索框-->
            <form class="layui-form ywform" lay-filter="searchInfo">
                <div id="searchzbPerson" class="top_search">
                    <div>
                        <div class="zbPerson">
                            <span class="distancesz">范围设置</span>
                            <input class="layui-input layui-inputa layui-inputzb" type="text" name="search_zbPerson" id="search_zbPerson" placeholder=""
                                   autocomplete="off" style="padding-left:10px;">
                            <span class="referencePoint"><i class="layui-icon  layui-icon-location"></i>设置参考点</span>
                            <span class="pointSearch" lay-submit="" lay-filter="searchPerson">搜索</span>
                        </div>
                    </div>
                </div>
            </form>
            <div class="layui-form" pane="">
                <ul id="ulPersonListb"></ul>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script type="text/javascript">
    $(function () {
        $('.tabarss').css('height',document.body.clientHeight+'px') ;
        $('#test').css({'height':document.body.clientHeight-194+'px','overflow-y':'auto'});
        $('#test12').css({'height':document.body.clientHeight-194+'px','overflow-y':'auto'});
    });
    layui.use(["tree",'util','table', 'form', 'jquery', 'element','layer','laydate'], function () {
        var laydate = layui.laydate;
        var arra ;
        var modifyMgrId;
        var mgrTemplate;
        var isThreshold;
        var flagMgr; //项目标识   1为正常应急项目  2为盱眙供电局项目
        var oldContent;//原短信内容
        var form = layui.form;
        var $ = layui.$;
        var util = layui.util;
        var layer = layui.layer;
        var tree = layui.tree;
        var element = layui.element;//tab
        $(".tabChoose").eq(0).addClass("tabChoosed");
        $(".personChoose").eq(1).hide();
        $(".tabChoose").on('click',function(){
            $(".tabChoose").removeClass("tabChoosed");
            $(".personChoose").hide();
            $(this).addClass("tabChoosed");
            $(".personChoose").eq($(this).index()).show();
        });
        let arrc=[{id:"1",name:"张三"},{id:"2",name:"周三"},{id:"1",name:"潘二"},{id:"1",name:"张三"}];
        arrc.forEach((items,index)=>{
            $("#ulPersonListc").append(`<li><input class="xmCheck"  lay-skin="primary" type="checkbox" name="like1[aaa]" value=${items.id}/><span>${items.name}</span></li>`);
        });
        arrc.forEach((items,index)=>{
            $("#ulPersonLista").append(`<li><input class="xmCheck"  lay-skin="primary" type="checkbox" name="like1[aaa]" value=${items.id}/><span>${items.name}</span></li>`);
        });
        arrc.forEach((items,index)=>{
            $("#ulPersonListb").append(`<li><input class="xmCheck"  lay-skin="primary" type="checkbox" name="like1[aaa]" value=${items.id}/><span>${items.name}</span></li>`);
        });
        form.render();
        $(".personContent").eq(1).hide();
        $(".personType").eq(0).addClass('personChoosed');
        $(".personType").on('click',function(){
            $(".personType").removeClass('personChoosed');
            $(".personContent").hide();
            $(this).addClass('personChoosed');
            $(".personContent").eq($(this).index()).show();
        });
        form.on('submit(searchPerson)', function(message) {
            console.log(message.field.search_Person);
            layui.form.render();
        });
    });
</script>